웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] 배열의 맨 앞에 추가하거나 삭제하기, shift, unshift

Last Modified : 2021-01-08 / Created : 2021-01-06
31,516
View Count

자바스크립의 배열에 값을 추가하는 방법은 여러가지가 있습니다. 만약 배열의 맨 앞에 값을 추가하거나 삭제하는 방법을 알아보려고 합니다.



# 자바스크립트 배열의 맨 앞 또는 맨 뒤에 값을 추가하기


자바스크립트의 배열에는 다양한 내장 함수가 존재하며 이 중에서 배열 맨 앞에 사용하는 함수가 존재합니다. 바로 shift(), unshift()입니다.

shift() // 배열 맨 앞의 값 삭제
unshift(값) // 배열 맨 앞의 값 추가


배열의 맨 앞의 값을 추가하거나 제거하는데 가장 쉽고 빠르게 사용할 수 있는 방법입니다.

먼저 shift()는 배열 맨 앞의 값을 제거합니다. 그리고 삭제한 값을 반환하게 됩니다.
다음으로 unshift()는 배열 앞에 새로운 값을 추가합니다. 그리고 배열의 전체 개수를 반환합니다.

그럼 아래에 간단한 예제를 만들어보겠습니다.


! 배열 맨 앞에 새로운 값 추가 및 삭제 예제


먼저 변수 mySite라는 배열 값을 만들고 맨 앞에 새로운 값을 추가하려고 합니다. 그 다음 추가한 값을 다시 삭제하는 방법입니다.
let mySite = ['is', 'free'];

mySite.unshift('web');
// 3을 출력함

// 실행결과 mySite 값
['web', 'is', 'free']

위와 같이 unshift()를 사용하여 배열의 맨 앞에 새로운 값을 추가하였습니다. 이제 추가한 맨 앞의 값을 반대로 삭제하기 위해서 shift()를 사용하려고 합니다.
let mySite = ['web', 'is', 'free'];

mySite.shift();
// 삭제한 'web'을 출력함

// 실행결과 mySite 값
['is', 'free']

결과는 예상대로 'web'이 삭제된 값을 가지게 되었습니다.


여기까지 배열에서 자주 사용되는 내장함수 shift(), unshift()를 알아보았습니다. 참고로 보통 값을 추가하거나 제거할 때 slice(), splice()가 많이 쓰이죠. 맨 앞에만 전제로 하는 경우라면 이 방법보다 더 쉽게 사용할 수 있는 장점이 있습니다.

Previous

자바스크립트 배열 값 순서 바꾸기, 변경하기

Previous

자바스크립트에서 쿼리스트링을 객체, object로 변환하기